<template>
  <div>
    <header-bar></header-bar>
    <el-select v-model="orderType" class="m-2" id="mode-select" placeholder="Select" size="large" @change="selectHandler">
      <el-option v-for="item in orderOptions" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <single-image-holder :imageInfoList="imgInfo.infoList"></single-image-holder>
    <el-backtop :bottom="100">
      <div class="icon-backtop">
        <el-icon :size="30">
          <CaretTop />
        </el-icon>
      </div>
    </el-backtop>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onBeforeMount, ref } from "vue";
import {
  getOrderImageListByStar,
  fetchImgInfosList,
  getOrderImageListByIDReverse,
  getOrderImageListByPraiseNumber,
  getOrderImageListByPraiseNumberReverse,
  fetchNotR18ImgInfosList,
} from "@/api";
import type { ImageReturnInfo } from "@/types";
import SingleImageHolder from "@/components/SingleImageHolder.vue";
import HeaderBar from "@/components/HeaderBar.vue";
import { useRoute, useRouter } from "vue-router";
import { ElIcon } from "element-plus";
import { CaretTop } from "@element-plus/icons-vue";

const route = useRoute();
const router = useRouter();
const defaultCondition: string = (route.params.condition as string) || "star";
const orderType = ref<string>(defaultCondition);
const orderOptions = [
  {
    value: "id1",
    label: "最新",
  },
  {
    value: "id2",
    label: "ID逆序",
  },
  {
    value: "praise1",
    label: "最赞",
  },
  {
    value: "praise2",
    label: "点赞逆序",
  },

  {
    value: "star",
    label: "开发者严选",
  },
  {
    value: "r12",
    label: "青少年模式",
  },
];
const imgInfo = reactive({
  baseUrl: "http://119.23.182.180:10003/novalai",
  infoList: new Array<ImageReturnInfo>(),
});
const selectHandler = () => {
  switch (orderType.value) {
    case "star": {
      getOrderImageListByStar().then((res) => {
        imgInfo.infoList = res.data.picture_infos;
      });
      break;
    }
    case "praise1": {
      router.push("praise1");
      getOrderImageListByPraiseNumber().then((res) => {
        imgInfo.infoList = res.data.picture_infos;
      });
      break;
    }
    case "praise2": {
      router.push("praise2");
      getOrderImageListByPraiseNumberReverse().then((res) => {
        imgInfo.infoList = res.data.picture_infos;
      });
      break;
    }
    case "id2": {
      router.push("id2");
      fetchImgInfosList().then((res) => {
        imgInfo.infoList = res.data.picture_infos;
      });
      break;
    }
    case "id1": {
      router.push("id1");
      getOrderImageListByIDReverse().then((res) => {
        imgInfo.infoList = res.data.picture_infos;
      });
      break;
    }
    case "r12": {
      router.push("r12");
      fetchNotR18ImgInfosList().then((res) => {
        console.log(res.data.picture_infos);
        imgInfo.infoList = res.data.picture_infos;
      });
      break;
    }
  }
};
onBeforeMount(() => {
  selectHandler();
});
</script>

<style scoped>
.icon-backtop {
  height: 100%;
  width: 100%;
  background-color: var(--el-bg-color-overlay);
  box-shadow: var(--el-box-shadow-lighter);
  /*line-height: 40px;*/
  color: #1989fa;
  border-radius: 50%;
}

.icon-backtop .el-icon {
  margin-top: 3px;
}
</style>
